<template>
	<view class="aui-navBar content b-t" :style="$theme.pageStyle">

		<view class="nodata" v-if="nodata == 0">
			<view class="colCen" style="margin-top: 150px;">
				<image src="http://imgs.soft.jx.cn/2022/07/31/9cc64a89c0a4f.png"
					style="width: 306rpx;height: 172px;margin-top: 300rpx;display: flex;margin: 0 auto;">
				</image>
				<text
					style="color: #CCCCCC;margin-top: 20rpx;width: 100%;text-align: center;display: block;">暂无您的卡片信息</text>
			</view>
		</view>

		<block v-for="(item, index) in addressList" :key="index">
			<view class="list b-b" :class="{ 'selected': item.selected }">
				<view class="wrapper" @click="saver(item)">
					<view class="address-box">
						<!-- <text v-if="item.is_default == 1" class="tag">默认</text> -->
						<text class="address">{{item.student_name}}</text>
					</view>
					<view class="u-box">
						<text class="mobile">{{item.idcode}}</text>
					</view>
				</view>
				<view class="icon">
					<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/581718452798QPMVYJ.png" mode="" @click="checkAddress(item.id)"></image>
				</view>
			</view>
		</block>

		<button class="add-btn" @click="addAddress('add')" v-if="!isSelected">新增营员</button>
		
		<button class="submit-btn" @click="submit()" v-else>确认提交</button>
	</view>
</template>



<script>
	import $H from '@/common/js/request.js';
	export default {
		components: {
			// uniSwipeAction,
			// uniLoadMore,
			//uniIcons,
		},
		data() {
			return {
				deletes: [{ //滑动显示隐藏按钮
					text: '删除',
					type: 1,
					style: {
						backgroundColor: '#3fda9b'
					}
				}, { //滑动显示隐藏按钮
					text: '修改',
					type: 2,
					style: {
						backgroundColor: '#db9d00'
					}
				}],
				save: uni.getStorageSync('add'),
				source: 0,
				addressList: [],
				isLoading: false,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
				nodata: 0,
				card_id: '',
				goods_id: uni.getStorageSync('goodscode'),
				isSelected: false,
			}
		},
		onLoad() {

		},
		onShow() {
			if (uni.getStorageSync('add') == 1) {
				uni.setNavigationBarTitle({
					title: '选择收货地址'
				});
			}
			this.addressList = [];
			$H.post('user/card', {
			}, {
				token: true
			}).then(res => {
				var list = res.data;
				for (let i = 0; i < list.length; i++) {
					//将数据逐条写入数组
					list[i].type = 1;
					this.addressList.push(list[i]);
					if (res.data.length != 0) {
						this.nodata = 1
					}
				}
			})
		},
		methods: {
			bindClick(e) {
				console.log(e)
			},
			saver(item) {
				// 切换当前项的选中状态
				this.addressList.forEach((address) => {
					if (address === item) {
						// 设置选中状态
						this.$set(address, 'selected', true);
					} else {
						// 取消其他项的选中状态
						this.$set(address, 'selected', false);
					}
				});
				this.card_id = item.id
				this.isSelected = true
				uni.setStorageSync('carditem', item)
			},
			//选择地址
			checkAddress(id) {
				// uni.setStorageSync('address',item);
				uni.navigateTo({
					url: '/pages/goods/cardManage?id=' + id
				})
			},
			addAddress(type, item) {
				uni.navigateTo({
					url: `/pages/goods/cardManage?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			//添加或修改成功之后回调
			refreshList(data, type) {
				//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
				this.addressList.unshift(data);
			},

			submit() {
				
				uni.navigateTo({
					url: '/pages/goods/confirmOrder?card_id=' + this.card_id
				})
				
				//创建订单
				// $H.post('order/placeOrder', {
				// 	'card_id': ,
				// 	'goods_id': uni.getStorageSync('goods_id'),
				// 	'spec' : uni.getStorageSync('specSelect')
				// }, {
				// 	token: true
				// }).then(res => {
				// 	if (res.code == 1) {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: res.info
				// 		});
				// 		setTimeout(() => {
				// 			uni.navigateTo({
				// 				url: '/pages/shop/submit?order=' + res.data.order_no,
				// 			})
				// 		}, 1000)
				// 	} else {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: res.info
				// 		});
				// 	}
				// })

			}


		}
	}
</script>

<style lang='scss'>
	page {
		background: #F2F2F2;
		padding-bottom: 120upx;
	}

	.content {
		position: relative;
	}

	.list {
		margin: 15px;
		padding: 10px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		background: #fff;
		position: relative;
		background: #FFFFFF;
		/* padding-left: 20upx; */
		border: 2upx solid #F1F1F1;
		flex: 1;

	}

	.selected {
		border: 2upx solid var(--color-primary);
		box-shadow: 0 0 4upx var(--color-primary-light-3);
	}


	.moren {
		position: absolute;
		right: 0px;
		top: 0px;
		background: #FFE9C2;
		border-radius: 0px 12px 0px 12px;
		width: 40px;
		text-align: center;
		font-size: 10px;
		color: #C66125;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		margin-top: 20upx;
		display: flex;
		align-items: center;

		.address {
			padding-right: 10upx;
			font-size: 30upx;
			color: #303133;
		}
	}

	.u-box {
		font-size: 28upx;
		color: #909399;
		margin: 20upx 0;

		.name {
			margin-right: 30upx;
		}
	}

	.icon-bianji {
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: #909399;
		padding-left: 30upx;
	}

	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100upx;
		font-size: 32upx;
		color: #fff;
		background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light-3) 100%);
		border-radius: 14px
	}

	.submit-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100upx;
		font-size: 32upx;
		color: #fff;
		background: var(--color-primary);
		border-radius: 14px
	}

	.icon {
		color: #FFFFFF;
		font-size: 28upx;
		line-height: 50upx;
		text-align: center;
		margin-right: 20upx;
	}

	.icon image {
		width: 30px;
		height: 30px;
	}

	.update {
		border-radius: 10upx;
		background: #db9d00;
		margin-bottom: 16upx;
	}

	.delete {
		border-radius: 10upx;
		background: #dd524d;
	}
</style>